<style lang="scss" scoped>
.header {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  h4 {
    color: #000;
    font-size: 20px;
  }
}

.menu2 {
  display: flex;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  font-size: 14px;
}

.tab {
  margin: 5px;
  padding: 5px;
  margin-left: 10px;
  width: 20%;
  background-color: rgb(240, 245, 253);
  border-radius: 50px;
  text-align: center;
}

.active {
  background-color: #00be8c;
  color: #fff;
}

.tab1 {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  font-size: 14px;
}

.box {
  width: 100vw;
  height: 100%;
  display: flex;

  .left {
    flex: 8;
    height: 100%;
    overflow: auto;

    div {
      width: 100%;
    }
  }

  .right {
    height: 100%;
    overflow: auto;
    flex: 7;

    div {
      display: flex;
      padding-left: 20px;
      width: 100%;
      height: 46px;
      align-items: center;
    }
  }
}

.activeIndex {
  background: #ccc;
}
.con {
  width: 100vw;
  height: 500px;
  overflow-y: auto;

  position: relative;

  .list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;

    dl {
      display: flex;
      padding: 10px;
      dt {
        width: 50px;
        height: 100px;
        img {
          width: 50px;
          height: 50px;
        }
        margin: 0 10px;
      }
      dd {
        .name {
          font-size: 20px;
          font-weight: 800;
        }
      }
    }
  }
}
</style>
<template>
  <div class="header">
    <div @click="showPopupcity" :model="city" style="font-size: 18px">
      {{ city }} <van-icon name="arrow-down" />
    </div>

    <van-search
      shape="round"
      placeholder="搜索医院、科室、医生"
      @click="$router.push('/RSearch')"
    />
  </div>
  <!-- 城市 -->
  <van-popup v-model:show="showcity" position="top" :style="{ height: '70%' }">
    <div class="box">
      <!-- 左侧城市 -->
      <div class="left">
        <van-sidebar v-model="active">
          <van-sidebar-item
            v-for="(item, index) in areaList.province_list"
            :key="index"
            :title="item"
            @click="getCity(index)"
          >
          </van-sidebar-item>
        </van-sidebar>
      </div>
      <!-- 右侧市区 -->
      <div class="right">
        <div
          v-for="(v, i) in arr1"
          :key="i"
          :class="{ activeIndex: currentIndexcity == i }"
        >
          <div @click="handCity(v, i)">{{ v }}</div>
        </div>
      </div>
    </div>
  </van-popup>

  <van-popup v-model:show="show" position="top" :style="{ height: '70%' }">
    <div class="box">
      <van-sidebar v-model="active">
        <van-sidebar-item title="标签名称" />
        <van-sidebar-item title="标签名称" />
        <van-sidebar-item title="标签名称" />
      </van-sidebar>
    </div>
  </van-popup>

  <van-dropdown-menu ref="menuRef">
    <!-- 医院类型 -->
    <van-dropdown-item :title="text" v-model="value" ref="itemRef">
      <div class="tab1">
        <div
          v-for="(tab, index) in listTap"
          :key="index"
          class="tab"
          :class="{ active: currentIndex === index }"
          @click="tabClick(tab, index)"
        >
          {{ tab }}
        </div>
        <div
          class="shanXuan"
          style="
            padding: 20px;
            background-color: #fff;
            height: 50px;
            width: 100%;
          "
        ></div>

        <van-button type="success" block round @click="confimState">
          确定
        </van-button>
      </div>
    </van-dropdown-item>
    <!-- 医院等级 -->

    <van-dropdown-item
      :title="text1"
      ref="itemRef1"
      class="menu2"
      v-model="value1"
    >
      <div class="tabs">
        <div
          v-for="(tab, index) in listTap1"
          :key="index"
          class="tab"
          :class="{ active: currentIndex === index }"
          @click="tabClick1(tab, index)"
        >
          {{ tab }}
        </div>
        <div
          class="shanXuan"
          style="
            padding: 20px;
            background-color: #fff;
            height: 50px;
            width: 100%;
          "
        ></div>
      </div>

      <div>
        <van-button type="success" block round @click="OK"> 确定 </van-button>
      </div>
    </van-dropdown-item>
  </van-dropdown-menu>

  <!-- 数据列表 -->
  <div class="con" @scroll="handScroll">
    <div class="content" :style="{ height: config.totalHeight + 'px' }"></div>

    <div
      class="list"
      :style="{ transform: `translateY(${scrollTopRef}px)` }"
      ref="listRef"
    >
      <dl
        v-for="(v, i) in renderData"
        :key="i"
        :v="v"
        :style="{ height: itemHeight + 'px' }"
      >
        <dt>
          <img :src="v.socoimage" alt="" />
        </dt>
        <dd>
          <div class="name">{{ v.nosocomium }}</div>
          <div>
            <van-tag plain type="success" style="margin: 0 5px">{{
              v.socostate
            }}</van-tag>
            <van-tag plain type="success">{{ v.socolv }}</van-tag>
          </div>
          <div style="font-size: 14px">科室：{{ v.socoadmin }}</div>
          <div style="font-size: 14px">地址：{{ v.sococity }}</div>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue'
import axios from 'axios'
import type { ListState, doctorState } from '@/interface'
import { areaList } from '@vant/area-data'
const showState = ref(false)
// 城市
const showcity = ref(false)
const showPopupcity = () => {
  showcity.value = true
}
const paramsData = reactive({
  pageCode: 1,
  pageSize: 50,
  lv: '',
  city: '',
  state: '',
  admin: '',
  search: '',
})

const currentIndexcity = ref(0)
const city = ref('全部')
const arr1 = ref<string[]>(['北京市'])

const getCity = (v: string) => {
  arr1.value = []

  for (let key in areaList.city_list) {
    if (v.slice(0, 2) == key.slice(0, 2)) {
      arr1.value.push(areaList.city_list[key])
      console.log(v)
    }
  }
}
const doctorState = ref<doctorState[]>([])
const handCity = (v: string, i: number) => {
  currentIndex.value = i
  showcity.value = false
  city.value = v
  paramsData.city = v
  console.log(paramsData)
  axios
    .get('/api/nosocomium/list', {
      params: paramsData
    })
    .then(res => {
      console.log(res)
      doctorState.value = [...doctorState.value, ...res.data.data]
      listData.value = res.data.data
    })
}

const show = ref(false)
const active = ref(0)
const value = ref(0)
const value1 = ref(0)
const currentIndex = ref(0)
const listData = ref<ListState[]>([])


const text = ref('医院类型')
const listTap = ref(['全部', '公立', '私立'])

const socoList = ref([])
const text1 = ref('医院等级')
const listTap1 = ref([
  '不限',
  '三级甲等',
  '三级乙等',
  '三级丙等',
  '二级甲等',
  '二级乙等',
  '二级丙等',
  '一级甲等',
  '一级乙等',
  '一级丙等',
])

const getList = () => {
 axios
    .get('/api/nosocomium/list', {
      params: {
        pageCode: paramsData.pageCode,
        pageSize: paramsData.pageSize,
        city: paramsData.city,
        state: paramsData.state,
        lv: paramsData.lv,
        admin: paramsData.admin,
        search: paramsData.search,
      },
    })
    .then(res => {
      console.log(res)
      doctorState.value = res.data.data
      listData.value = res.data.data
    })
}
getList()
// 类型筛选
const tabClick = (tab: string, index: number) => {
  currentIndex.value = index
  text.value = tab
  if (tab == '全部') {
    tab = ''
  }
  paramsData.state = tab
}
// 等级筛选
const tabClick1 = (tab: string, index: number) => {
  currentIndex.value = index
  text1.value = tab
  if (tab == '不限') {
    tab = ''
  }
  paramsData.lv = tab
}
// 类型数据
const State = () => {
  axios.get('/api/nosocomium/list', { params: paramsData }).then(res => {
    console.log(res)
    doctorState.value = res.data.data
    listData.value = res.data.data
  })
}
// 等级数据
const grade = () => {
  axios.get('/api/nosocomium/list', { params: paramsData }).then(res => {
    console.log(res)
    socoList.value = res.data.data
    listData.value = res.data.data
  })
}
// 点击类型确定

const itemRef = ref()

const confimState = () => {
  State()
  itemRef.value.toggle()
}
// 点击等级确定

const itemRef1 = ref()

const OK = () => {
  grade()
  itemRef1.value.toggle()
}

const config = reactive({
  startIndex: 0,
  endIndex: 0,
  // 总高
  totalHeight: 0,
})
const clientHeight = document.documentElement.clientHeight
const itemHeight = 130
const clientItemcount = Math.ceil(clientHeight / itemHeight)
const renderData = computed(() => {
  return listData.value.slice(config.startIndex, config.endIndex)
})
const listRef = ref()
const scrollTopRef = ref(0)
const arr = ref<number[]>([])
const handScroll = (e: any) => {
  const scrollTop = e.target.scrollTop
  config.startIndex = Math.floor(scrollTop / itemHeight)
  config.endIndex = config.startIndex + clientItemcount
  scrollTopRef.value = config.startIndex * itemHeight
}

onMounted(() => {
  // 总高
  config.totalHeight = clientItemcount * itemHeight
  config.endIndex = config.startIndex + clientItemcount
})
</script>
